/**
 * Created by Administrator on 2017/10/29.
 */
import React from 'react'
import '../../../../static/css/reset.css'
import  './Search.css'
import Logo from './logo.png'
import new_top from './new_top.png'
import  serch_btn from './search_btn.png'
import  scrollTopIcon from   './scrollTopIcon.png'
class HomeSearch extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            scrollTop:true
        };
    }
    go_to_search(){
        window.location.href='search.html'
    }
    render(){
        let HomeSearch_content={
            backgroundColor:'white',
            zIndex: '1000',
            position: 'fixed',
            top: '0px',
            color:'black',
            width:'100%'
        }
        let HomeSearch_content_null={

        }
        let colorblack={
            color:'#D2D3D5',
        }
        let colorwhite={
            color:'white'
        }
        let  borderwhite={
            border:'none'
        }
        let  borderblack={
            border:'1px solid #D2D3D5'
        }
        return (
            <div>
                {this.state.scrollTop?  <div className="HomeSearch_content">
                    <div className="HomeSearch_logo">
                        <img src={Logo} />
                    </div>
                    <div className="searchInput"
                         onClick={ ()=>{this.go_to_search() } }
                    >
                        <div>
                            搜索
                        </div>
                        <div>
                            <input type="text" name="FirstName" />
                        </div>
                        <div><img src={serch_btn}/> </div>
                    </div>
                    <div className="new_top">
                        <img src={new_top}
                             onClick={ ()=>{window.location.href="mine_news.php"} }
                        />
                    </div>
                </div>: <div className="HomeSearch_content"
                        style={{
                            backgroundImage:'url('+scrollTopIcon+')',
                            backgroundRepeat:'no-repeat',
                            backgroundSize:'contain',
                            backgroundPosition:'cemter',
                            width:'7.5rem',
                            zIndex: '1000',
                            position: 'fixed',
                            top: '0px'
                        }}
                       onClick={ ()=>{this.go_to_search() } }
                > </div>
                }

            </div>
        )
    }


    scrollHandler = this.handleScroll.bind(this);
    componentDidMount() {
        window.addEventListener('scroll', this.scrollHandler);
    }
    _handleScroll(scrollTop) {
        console.log('滚动条距离页面的高度：'+scrollTop)
        //滚动条距离页面的高度
        if(scrollTop>0){
            this.setState({
                scrollTop: false,
            });
        }else{
            this.setState({
                scrollTop: true,
            });
        }
    }

    handleScroll(event){
        let scrollTop = event.srcElement.body.scrollTop;
        this._handleScroll(scrollTop);
    }



}


export default HomeSearch